.video-banner{
	margin-left: 40px;
	margin-top: 20px;
	width: 500px;
	height: 300px;
	position: relative;
	overflow: hidden;
	img{
		width: 100%;
		height: 100%;
		transition: all 0.3s ease-in 10ms;
	}
	.mosk{
		position: absolute;
		left: 0;
		top: 0;
		width: 500px;
		height: 300px;
		background-color: rgba(0, 0, 0, .2);
		cursor: pointer;
		transition: all 0.3s ease-in 10ms;
		&::after{
			content: '';
			display: block;
			width: 80px;
			height: 80px;
			border-radius: 50%;
			background: #535359 url(../img/icon/icon_bf.png) no-repeat center / 40% 40%;
			position: absolute;
			left: calc(50% - 40px);
			top: calc(50% - 40px);
			transition: all 0.3s ease-in 10ms;
		}
	}
}
.video-banner:hover{
	img{
		transform: scale(1.1);
	}
	.mosk{
		background-color: rgba(0, 0, 0, .5);
		&::after{
			background: #ffffff url(../img/icon/icon_bf1.png) no-repeat center / 40% 40%;
		}
	}
}

.el-dialog__headerbtn{
	top: 10px;
	right: 0;
	width: 40px;
	height: 40px;
	background:url(../img/icon/icon_close.png) no-repeat center / 100% 100%;
	i{display: none;}
}
.el-dialog__headerbtn:hover{
	background:url(../img/icon/icon_close1.png) no-repeat center / 100% 100%;
}

.about-list{
	padding: 50px 0;
	.list{
		flex: 1;
		padding: 30px 20px 20px;
		border-radius: 10px;
		box-shadow: 0px 0px 4px 0px rgba(24, 24, 24, 0.1);
		transition: all 0.3s ease-in 10ms;
		h3{
			font-size: 22px;
			margin-bottom: 30px;
		}
		span{
			font-size: 14px;
			position: relative;
			padding-bottom: 10px;
			&::after{
				content: '';
				display: block;
				width: 100%;
				height: 3px;
				background: #2FC8E1;
				position: absolute;
				left: 0;
				bottom: 0;
			}
		}
	}
	.list:nth-child(1){
		background:url(../img/pic/about_list_1.png) no-repeat center / 100% 100%;
	}
	.list:nth-child(2){
		margin: 0 30px;
		background:url(../img/pic/about_list_2.png) no-repeat center / 100% 100%;
	}
	.list:nth-child(3){
		background:url(../img/pic/about_list_3.png) no-repeat center / 100% 100%;
	}
	.list:hover{
		transform: translateY(-10px);
	}
}

.about-title{
	text-align: center;
	font-size: 36px;
	color:#181818;
	padding: 54px 0;
}
.about-course{
	padding-bottom: 50px;
	background:url(../img/pic/about_lc_bg.jpg) no-repeat center / 100% 100%;
}
.coures-item{
	width: 100%;
	position: relative;
	height: 280px;
	overflow: hidden;
	.item{
		width: 20%;
		padding: 10px 0;
		border-bottom:1px solid #2b33a8 ;
		transition: all 0.3s ease-in 10ms;
		position: absolute;
		bottom: 0;
		.year{
			font-size: 30px;
			font-weight: 600;
			line-height: 1.2667em;
			color: #181818;
		}
		.list{
			padding-left:10px ;
			position: relative;
			font-size: 14px;
			color: #181818;
			line-height: 28px;
			&::after{
				content: '';
				display: block;
				width: 0;
				height: 0;
				border-left: 4px solid #2b33a8;
				border-top: 4px solid transparent;
				border-bottom: 4px solid transparent;
				border-right: 4px solid transparent;
				position: absolute;
				left: 0;
				top: calc((100% - 8px) / 2);
			}
		}
	}
	.item:hover{
		border-color:#2FC8E1 ;
	}
}
.coures-button{
	display: flex;
	align-items: center;
	justify-content: center;
	.bnt{
		width: 40px;
		height: 40px;
		box-shadow: 0px 0px 4px 0px rgba(24, 24, 24, 0.1);
		border-radius:50%;
		position: relative;
		cursor: pointer;
		transition: all 0.3s;
	}
	.bnt-left{
		&::after{
			content: '';
			display: block;
			width: 0;
			height: 0;
			border-right: 8px solid #2b33a8;
			border-top: 8px solid transparent;
			border-bottom: 8px solid transparent;
			border-left: 8px solid transparent;
			position: absolute;
			left: 8px;
			top: calc((100% - 16px) / 2);
		}
	}
	.bnt-right{
		margin-left: 30px;
		&::after{
			content: '';
			display: block;
			width: 0;
			height: 0;
			border-left: 8px solid #2b33a8;
			border-top: 8px solid transparent;
			border-bottom: 8px solid transparent;
			border-right: 8px solid transparent;
			position: absolute;
			right: 8px;
			top: calc((100% - 16px) / 2);
		}
	}
	.bnt-left:hover{
		background-color: #2b33a8;
		&::after{
			border-right: 8px solid #2FC8E1;
		}
	}
	.bnt-right:hover{
		background-color: #2b33a8;
		&::after{
			border-left: 8px solid #2FC8E1;
		}
	}
}

.honor{
	background:url(../img/pic/honor_bg.jpg) no-repeat center / 100% 100%;
	.warp{
		display: flex;
		flex-wrap: wrap;
		.list{
			padding: 20px;
			width: calc((100% - 60px) / 4);
			margin-left: 20px;
			background:url(../img/pic/honor_list_bg.png) no-repeat center / 100% 100%;
			text-align: center;
			margin-bottom: 20px;
			transition: all 0.3s ease-in 10ms;
			.year{
				font-size: 14px;
				font-weight: bold;
				color: #2b33a8;
				line-height: 20px;
				padding-bottom: 16px;
				background:url(../img/pic/hua.png) no-repeat center / 100px 36px;
			}
			.title{
				margin-top: 10px;
				font-size: 18px;
				font-weight: bold;
				line-height: 1.44em;
				color: #181818;
			}
			.tips{
				font-size: 14px;
				color: #666666;
				margin-top: 6px;
			}
		}
		.list:nth-child(4n + 1){
			margin-left: 0;
		}
		.list:hover{
			transform: translateY(-10px);
		}
	}
}

.uathen{
	margin-top: 30px;
	padding: 50px 0;
	background:url(../img/pic/about_auth.jpg) no-repeat center / 100% 100%;
	.list{
		flex: 1;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		transition: all 0.3s ease-in 10ms;
		img{
		   transition: all 0.3s ease-in 10ms;	
		}
	}
	.list:hover{
		color: #2b33a8;
		img{
			transform: translateY(-10px);
		}
		
	}
}

.about-msg{
	padding-bottom: 50px;
	.cont{
		background:url(../img/pic/about_jy.jpg) no-repeat right / auto 100%;
		color: #181818;
		height: 350px;
		padding: 40px 60% 40px 0;
		.name{
			font-size: 30px;
			font-weight: bold;
		}
		.position{
			margin-top: 16px;
			font-size: 18px;
			position: relative;
			padding-bottom: 20px;
			&::after{
				content: '';
				display: block;
				width: 30px;
				height: 3px;
				background-color: #2FC8E1;
				position: absolute;
				left: 0px;
				bottom: 0;
			}
		}
		p{
			margin-top: 20px;
			font-size: 14px;
			line-height: 1.8;
			color: #666;
		}
	}
	.msg-tab{
		display: flex;
		margin-top: 20px;
		.m-list{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			border-left: 1px solid transparent;
			border-right: 1px solid transparent;
			border-top: 1px solid #ededed;
			border-bottom: 1px solid #ededed;
			padding: 10px;
			 transition: all 0.3s ease-in 10ms;	
			img{
				height: 40px;
			}
			span{
				color: #181818;
				font-size: 18px;
				margin-left: 10px;
				 transition: all 0.3s ease-in 10ms;	
			}
		}
		.m-list:nth-child(1){
		    border-left: 1px solid #ededed;
		}
		.m-list:nth-last-child(1){
			border-right: 1px solid #ededed;
		}
		.m-list-active{
			border-color: #2b33a8!important;
			span{
				color: #2b2b2b;
			}
		}
	}
}

@media only screen and (max-width: 750px) {
	.banner{
		padding-bottom: 0.6rem;
		background:url(../img/pic/about_banner.jpg) no-repeat right / 100% 100%;
	}
	.banner-content-about{
		top: 0.3rem!important;
		display: block!important;
		position: relative!important;;
		// padding-bottom: 3.2rem;
	}
	.video-banner{
		margin-left: 0;
		margin-top: 0.12rem;
		width: 100%;
		height: 2rem;
		position: relative;
		overflow: hidden;
		img{
			width: 100%;
			height: 100%;
			transition: all 0.3s ease-in 10ms;
		}
		.mosk{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			&::after{
				width: 0.6rem;
				height: 0.6rem;
				left: calc(50% - 0.3rem);
				top: calc(50% - 0.3rem);
			}
		}
	}
	.video-banner:hover{
		img{
			transform: scale(1.1);
		}
		.mosk{
			background-color: rgba(0, 0, 0, .5);
			&::after{
				background: #ffffff url(../img/icon/icon_bf1.png) no-repeat center / 40% 40%;
			}
		}
	}
	.el-dialog{
		width: 100%;
	}
	.about-list{
		padding: 0.3rem 0.1rem;
		display: block;
		.list{
			flex: 1;
			padding: 0.2rem;
			border-radius: 0.1rem;
			h3{
				font-size: 0.16rem;
				margin-bottom: 0.2rem;
			}
			span{
				font-size: 0.12rem;
				padding-bottom: 0.1rem;
				&::after{
					height: 2px;
				}
			}
		}
		.list:nth-child(1){
			background:url(../img/pic/about_list_1.png) no-repeat center / 100% 100%;
		}
		.list:nth-child(2){
			margin: 0.2rem 0;
			background:url(../img/pic/about_list_2.png) no-repeat center / 100% 100%;
		}
		.list:nth-child(3){
			background:url(../img/pic/about_list_3.png) no-repeat center / 100% 100%;
		}
		.list:hover{
			transform: translateY(-10px);
		}
	}
	
	.about-title{
		text-align: center;
		font-size: 0.18rem;
		color:#181818;
		padding: 0.34rem 0;
	}
	.about-course{
		padding-bottom: 0.3rem;
		background:url(../img/pic/about_lc_bg.jpg) no-repeat center / 100% 100%;
	}
	.coures-item{
		width: 100%;
		position: relative;
		height: 1rem;
		overflow: hidden;
		.item{
			width: 100%;
			padding: 0.1rem;
			border-bottom:1px solid #2b33a8 ;
			transition: all 0.3s ease-in 10ms;
			position: absolute;
			bottom: 0;
			.year{
				font-size: 0.18rem;
				font-weight: 600;
				line-height: 1.2667em;
				color: #181818;
				margin-bottom: 0.2rem;
				text-align: center;
			}
			.list{
				padding-left:0.1rem ;
				position: relative;
				font-size: 0.12rem;
				color: #181818;
				line-height: 1.6;
				&::after{
					content: '';
					display: block;
					width: 0;
					height: 0;
					border-left: 4px solid #2b33a8;
					border-top: 4px solid transparent;
					border-bottom: 4px solid transparent;
					border-right: 4px solid transparent;
					position: absolute;
					left: 0;
					top: calc((100% - 8px) / 2);
				}
			}
		}
		.item:hover{
			border-color:#2FC8E1 ;
		}
	}
	.coures-button{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 0.2rem;
		.bnt{
			width: 40px;
			height: 40px;
			box-shadow: 0px 0px 4px 0px rgba(24, 24, 24, 0.1);
			border-radius:50%;
			position: relative;
			cursor: pointer;
			transition: all 0.3s;
		}
		.bnt-left{
			&::after{
				content: '';
				display: block;
				width: 0;
				height: 0;
				border-right: 8px solid #2b33a8;
				border-top: 8px solid transparent;
				border-bottom: 8px solid transparent;
				border-left: 8px solid transparent;
				position: absolute;
				left: 8px;
				top: calc((100% - 16px) / 2);
			}
		}
		.bnt-right{
			margin-left: 30px;
			&::after{
				content: '';
				display: block;
				width: 0;
				height: 0;
				border-left: 8px solid #2b33a8;
				border-top: 8px solid transparent;
				border-bottom: 8px solid transparent;
				border-right: 8px solid transparent;
				position: absolute;
				right: 8px;
				top: calc((100% - 16px) / 2);
			}
		}
		.bnt-left:hover{
			background-color: #2b33a8;
			&::after{
				border-right: 8px solid #2FC8E1;
			}
		}
		.bnt-right:hover{
			background-color: #2b33a8;
			&::after{
				border-left: 8px solid #2FC8E1;
			}
		}
	}
	
	.honor{
		background:url(../img/pic/honor_bg.jpg) no-repeat center / 100% 100%;
		.warp{
			display: flex;
			flex-wrap: wrap;
			padding: 0 0.1rem;
			.list{
				padding: 0.1rem;
				width: calc((100% - 0.1rem) / 2);
				margin-left: 0.1rem;
				text-align: center;
				margin-bottom: 20px;
				transition: all 0.3s ease-in 10ms;
				.year{
					font-size: 0.12rem;
					line-height: 1.6;
					padding-bottom: 0.1rem;
					background:url(../img/pic/hua.png) no-repeat center / 100px 0.24rem;
				}
				.title{
					margin-top: 0.1rem;
					font-size: 0.13rem;
					line-height: 1.44em;
				}
				.tips{
					font-size: 14px;
					color: #666666;
					margin-top: 6px;
				}
			}
			.list:nth-child(2n + 1){
				margin-left: 0;
			}
			.list:hover{
				transform: translateY(-10px);
			}
		}
	}
	
	.uathen{
		margin-top: 0;
		padding: 0.3rem 0;
		.warp{
			flex-wrap: wrap;
		}
		.list{
			min-width: 33.3%;
			font-size: 0.12rem;
			padding: 0 0.1rem;
			margin-top: 0.2rem;
			img{
				width: 0.5rem;
				height: 0.5rem;
			}
		}
	}
	
	.about-msg{
		padding-bottom: 0.3rem;
		.cont{
			background:url(../img/pic/about_jy.jpg) no-repeat right / auto 100%;
			color: #181818;
			height: auto;
			min-height: 2.8rem;
			padding: 0.2rem 0.1rem;
			.name{
				font-size: 0.18rem;
				font-weight: bold;
			}
			.position{
				margin-top: 0.1rem;
				font-size: 0.13rem;
				position: relative;
				padding-bottom: 0.1rem;
				&::after{
					content: '';
					display: block;
					width: 30px;
					height: 3px;
					background-color: #2FC8E1;
					position: absolute;
					left: 0px;
					bottom: 0;
				}
			}
			p{
				margin-top: 0.1rem;
				font-size: 0.12rem;
				line-height: 1.8;
				color: #666;
			}
		}
		.msg-tab{
			display: flex;
			margin-top: 0.1rem;
			.m-list{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				border-left: 1px solid transparent;
				border-right: 1px solid transparent;
				border-top: 1px solid #ededed;
				border-bottom: 1px solid #ededed;
				padding: 10px;
				 transition: all 0.3s ease-in 10ms;	
				img{
					height: 0.2rem;
				}
				span{
					display: none;
					color: #181818;
					font-size: 18px;
					margin-left: 10px;
					 transition: all 0.3s ease-in 10ms;	
				}
			}
			.m-list:nth-child(1){
			    border-left: 1px solid #ededed;
			}
			.m-list:nth-last-child(1){
				border-right: 1px solid #ededed;
			}
			.m-list-active{
				border-color: #2b33a8!important;
				span{
					color: #2b2b2b;
				}
			}
		}
	}
}